<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        table td{
            padding: 20px 40px;
        }
        table tr:nth-child(odd) {
            background-color: green;
        }
        table tr:nth-child(even) {
            background-color: red;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table border="1">
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <script>
       let tds = document.querySelectorAll('td');
       tds.forEach(item => {
           item.onclick= function () {
               this.style.backgroundColor = 'black';
           }
       })
    </script>
</body>
</html>